<template>
  <div>
    <!-- 已选择的优惠券 -->
    <div v-if="selectedCoupon" class="mb-6">
      <div class="relative rounded-2xl overflow-hidden shadow-lg bg-gradient-to-r from-gray-100 to-gray-200 text-gray-900">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 opacity-10">
          <div class="absolute top-0 right-0 w-20 h-20 bg-gray-300 rounded-full -translate-y-10 translate-x-10"></div>
          <div class="absolute bottom-0 left-0 w-16 h-16 bg-gray-300 rounded-full translate-y-8 -translate-x-8"></div>
        </div>
        
        <!-- 锯齿边效果 -->
        <div class="absolute right-0 top-0 bottom-0 w-6 overflow-hidden">
          <div class="absolute right-0 top-0 bottom-0 w-12 bg-white transform rotate-12 origin-left opacity-95"></div>
        </div>
        
        <div class="relative z-10 p-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
              <div class="text-3xl font-black tracking-tight">
                {{ getDiscountText(selectedCoupon) }}
              </div>
              <div>
                <div class="text-lg font-bold">
                  {{ selectedCoupon.coupon?.name || selectedCoupon.name }}
                </div>
                <div class="text-sm opacity-90">
                  {{ getConditionText(selectedCoupon) }}
                </div>
                <div v-if="selectedCoupon.coupon?.usage_note" class="text-xs opacity-80 mt-1">
                  {{ selectedCoupon.coupon.usage_note }}
                </div>
              </div>
            </div>
            <button @click="removeCoupon" class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 可用优惠券列表 -->
    <div v-else>
      <div v-if="availableCoupons.length > 0" class="space-y-3">
        <div v-for="coupon in availableCoupons.slice(0, 3)" :key="coupon.user_coupon_id || coupon.id"
             @click="selectCoupon(coupon)"
             class="group relative rounded-xl border-2 cursor-pointer transition-all duration-200 hover:shadow-md"
             :class="'border-gray-200 hover:border-gray-300'">
          <div class="p-4">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-4">
                <div class="text-2xl font-bold text-gray-900">
                  {{ getDiscountText(coupon) }}
                </div>
                <div>
                  <div class="font-medium text-gray-900">
                    {{ coupon.coupon?.name || coupon.name }}
                  </div>
                  <div class="text-sm text-gray-500">
                    {{ getConditionText(coupon) }}
                  </div>
                </div>
              </div>
              <svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else class="text-center py-8 text-gray-500">
        <div class="w-12 h-12 mx-auto mb-3 bg-gray-100 rounded-full flex items-center justify-center">
          <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-12" />
          </svg>
        </div>
        <p class="text-sm">暂无可用的优惠券</p>
      </div>
    </div>
    
    <!-- 优惠券选择弹窗 -->
    <div v-if="showModal" class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50" @click="emit('close-modal')">
      <div class="bg-white rounded-2xl max-w-4xl w-full mx-4 max-h-[85vh] overflow-hidden shadow-xl" @click.stop>
        <!-- 弹窗头部 -->
        <div class="p-6 border-b border-gray-100">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-2xl font-light text-gray-900">选择优惠券</h3>
              <p class="text-sm text-gray-500 mt-1">选择最适合的优惠券</p>
            </div>
            <button @click="emit('close-modal')" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
        
        <!-- 弹窗内容 -->
        <div class="p-6 overflow-y-auto max-h-[60vh]">
          <!-- 可用优惠券 -->
          <div v-if="availableCoupons.length > 0">
            <div class="flex items-center justify-between mb-4">
              <h4 class="text-lg font-medium text-gray-900">可用优惠券</h4>
              <span class="text-sm text-gray-500">{{ availableCoupons.length }} 张</span>
            </div>
            <div class="space-y-3">
              <div v-for="coupon in availableCoupons" :key="coupon.user_coupon_id || coupon.id"
                   @click="selectCoupon(coupon)"
                   class="group relative rounded-xl border-2 cursor-pointer transition-all duration-200 hover:shadow-md"
                   :class="selectedCoupon?.user_coupon_id === coupon.user_coupon_id 
                     ? 'border-gray-900 bg-gray-50' 
                     : 'border-gray-200 hover:border-gray-300'">
                <div class="p-4">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                      <div class="text-2xl font-bold text-gray-900">
                        {{ getDiscountText(coupon) }}
                      </div>
                      <div>
                        <div class="font-medium text-gray-900">
                          {{ coupon.coupon?.name || coupon.name }}
                        </div>
                        <div class="text-sm text-gray-500">
                          {{ getConditionText(coupon) }}
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center gap-2">
                      <div v-if="selectedCoupon?.user_coupon_id === coupon.user_coupon_id" 
                           class="w-5 h-5 bg-orange-500 rounded-full flex items-center justify-center">
                        <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                      </div>
                      <svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 不可用优惠券 -->
          <div v-if="unavailableCoupons.length > 0" class="mt-8">
            <div class="flex items-center justify-between mb-4">
              <h4 class="text-lg font-medium text-gray-900">不可用优惠券</h4>
              <span class="text-sm text-gray-500">{{ unavailableCoupons.length }} 张</span>
            </div>
            <div class="space-y-3">
              <div v-for="coupon in unavailableCoupons" :key="coupon.user_coupon_id || coupon.id"
                   class="relative rounded-xl border-2 border-gray-200 bg-gray-50 opacity-60">
                <div class="p-4">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                      <div class="text-2xl font-bold text-gray-400">
                        {{ getDiscountText(coupon) }}
                      </div>
                      <div>
                        <div class="font-medium text-gray-500">
                          {{ coupon.coupon?.name || coupon.name }}
                        </div>
                        <div class="text-sm text-red-500">
                          {{ coupon.reason }}
                        </div>
                      </div>
                    </div>
                    <div class="text-gray-400">
                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div v-if="availableCoupons.length === 0 && unavailableCoupons.length === 0" class="text-center py-12 text-gray-500">
            <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
              <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-12" />
              </svg>
            </div>
            <p class="text-lg font-medium text-gray-900 mb-2">暂无可用的优惠券</p>
            <p class="text-sm text-gray-500">当前订单暂无可用的优惠券</p>
          </div>
        </div>
        
        <!-- 弹窗底部 -->
        <div class="p-6 border-t border-gray-100 bg-gray-50">
          <div class="flex justify-between items-center">
            <div class="text-sm text-gray-500">
              <span v-if="selectedCoupon">已选择：{{ selectedCoupon.coupon?.name || selectedCoupon.name }}</span>
              <span v-else>请选择一张优惠券</span>
            </div>
            <div class="flex gap-3">
              <button @click="emit('close-modal')" 
                      class="px-6 py-2 text-gray-600 hover:text-gray-900 font-medium transition-colors">
                取消
              </button>
              <button @click="confirmSelection" 
                      class="px-6 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors font-medium">
                确定选择
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  availableCoupons: {
    type: Array,
    default: () => []
  },
  unavailableCoupons: {
    type: Array,
    default: () => []
  },
  selectedCoupon: {
    type: Object,
    default: null
  },
  showModal: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['select', 'remove', 'close-modal'])

// 获取优惠文本
const getDiscountText = (coupon) => {
  const couponData = coupon.coupon || coupon
  switch (couponData.type) {
    case 'fixed':
    case 'full_reduction':
      return `¥${couponData.value}`
    case 'percent':
      return `${couponData.value}折`
    case 'shipping':
      return '免运费'
    default:
      return ''
  }
}

// 获取条件文本
const getConditionText = (coupon) => {
  const couponData = coupon.coupon || coupon
  if (couponData.min_spend && couponData.min_spend > 0) {
    return `满¥${couponData.min_spend}可用`
  } else {
    return '无门槛使用'
  }
}

// 选择优惠券
const selectCoupon = (coupon) => {
  emit('select', coupon)
  emit('close-modal')
}

// 移除优惠券
const removeCoupon = () => {
  emit('remove')
}

// 确认选择
const confirmSelection = () => {
  emit('close-modal')
}
</script>